<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus />

    <hr />
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components: { MyTest },
  data () {
    return {
      c: 'red',
      uname: 'zhangsan'
    }
  },
  // 自定义指令
  directives: {
    // 指令: {
    //   // el 表示使用这个指令的元素  obj.value 表示指令的值
    //   bind (el, obj) {}, // 只会执行一次，可以在里面对元素进行样式的设置
    //   inserted (el, obj) {}, // 只会执行一次，可以在里面对元素进行行为操作，比如让元素获得焦点
    //   update (el, obj) {}, // 数据更新后，子组件的页面不一定更新，它就会执行
    //   componentUpdated (el, obj) {}, // 数据更新后，包括子组件的数据、页面也更新后，它会执行
    //   unbind (el, obj) {} // 指令解绑的时候(组件销毁)，它执行
    // },
    // 指令 (el, obj) {}, // 如果指令只有bind和update方法，并且两个方法一样，则可以简写成函数

    color: {
      bind (el, obj) {
        // console.log(el)
        // console.log(obj)
        el.style.color = obj.value
      },
      update (el, obj) {
        el.style.color = obj.value
      }
    },

    // color (el, obj) {
    //   el.style.color = obj.value
    // }
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style></style>
